// 1. 发送短信验证码模块
const code = document.querySelector('.code')
let time = 10
let timeId = null //解决定时器过快
let flag = true
code.addEventListener('click', function () {
    if (flag) {
        flag = false
        time = 6 //解决每次再次点击的时候，重新开始
        code.innerHTML = `倒计时(${time})秒`
        clearInterval(timeId)//解决定时器过快,每次开启新的定时器时，清楚上一次的定时器
        timeId = setInterval(function () {
            time--
            if (time <= 0) {
                clearInterval(timeId)
                code.innerHTML = `重新获取`
                flag = true
                return
            }
            code.innerHTML = `倒计时(${time})秒`
        }, 1000)
    }
}
)
// 2. 验证用户名, 用户名的正则表达式 /^[a-zA-Z0-9-_]{6,10}$/  
//      如果校验不通过, 在用户名下面有个span标签, 在其显示 用户名不符合要求.手机号验证码密码都是一样的逻辑

let unameget = localStorage.getItem('uname')
const uname = document.querySelector('[name=username]')
uname.value =unameget

uname.addEventListener('change', verifyName)
function verifyName() {
    const reg = /^[a-zA-Z0-9-_]{6,10}$/
    const span = uname.nextElementSibling
    if (!reg.test(uname.value)) {
        span.innerHTML = `输入不合法，请输入6-10位`
        span.style.display='block'
        return false
    }
    span.innerHTML = ''
    span.style.display='none'
    return true
}
// 3. 验证手机号, 手机号的正则表达式 /^1[3-9]\d{9}$/
const phone = document.querySelector('[name=phone]')
phone.addEventListener('change', verifyphone)
function verifyphone() {
    const rge = /^1[3-9]\d{9}$/
    const span = phone.nextElementSibling
    if (!rge.test(phone.value)) {
        span.innerHTML = `输入不合法，请输入正确的11位手机号码`
        span.style.display='block'
        return false
    }
    span.innerHTML = ''
    span.style.display='none'
    return true
}
// 4. 验证的是验证码, 验证码的正则表达式 /^\d{6}$/
const code1 = document.querySelector('[name=code]')
code1.addEventListener('change', verifycode1)
function verifycode1() {
    const rge = /^\d{6}$/
    const span = code1.nextElementSibling
    if (!rge.test(code1.value)) {
        span.innerHTML = `输入不合法，请输入6位验证码`
        span.style.display='block'
        return false
    }
    span.innerHTML = ''
    span.style.display='none'
    return true

}
// 5. 验证的是密码框, 密码框的正则表达式 /^[a-zA-Z0-9-_]{6,20}$/
let pwdget = localStorage.getItem('pwd')

const pwd = document.querySelector('[name=password]')
pwd.value = pwdget

pwd.addEventListener('change', verifypwd)
function verifypwd() {
    const rge = /^[a-zA-Z0-9-_]{6,20}$/
    const span = pwd.nextElementSibling
    span.style.display='block'
    if (!rge.test(pwd.value)) {
        span.innerHTML = `输入不合法，请输入正确的密码`
        return false
    }
    span.innerHTML = ''
    span.style.display='none'
    return true
}
// 6. 确认密码的验证
const conpwd = document.querySelector('[name=confirm]')
conpwd.addEventListener('change', verifyconpwd)
function verifyconpwd() {
    const rge = /^[a-zA-Z0-9-_]{6,20}$/
    const span = conpwd.nextElementSibling
    if (conpwd.value === pwd.value) {
        span.innerHTML = ''
        span.style.display='none'
        return true
    }
    span.innerHTML = `两次密码不一致`
    span.style.display='block'
    return false
}

// 7. 点击 我同意 按钮, 让i标签添加或者移除 el-icon-success 这个类
const agreebtn = document.querySelector('.icon-chenggong')
agreebtn.addEventListener('click', function () {
    agreebtn.classList.toggle('el-icon-success')
})
// 8. 提交的整体验证
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
    e.preventDefault()
    if (!verifyName()) {
        return
    }
    if (!verifyphone()) {
        return
    }
    if (!verifycode1()) {
        return
    }
    if (!verifypwd()) {
        return
    }
    if (!verifyconpwd()) {
        return
    }
    const ret = agreebtn.classList.contains('el-icon-success')
    if (!ret) {
        alert('请勾选同意协议')
        return
    }
    alert('注册成功')
    localStorage.setItem('uname', uname.value)
    localStorage.setItem('pwd', pwd.value)
    location.href = './login.html'
})